<div class="modal-header">
    <h3>Background Settings</h3>
</div>
<style>
    .modal-body {
        max-height: 450px !important;
    }

    .modal-body > div {
        margin-top: 1px;
        padding: 10px;
        padding-left: 15px;
        background-color: #f4f4f4;
    }

    .modal-body > div > span{
        display: inline-block;
        margin-bottom: 5px;
    }
    .modal-footer{
        padding-bottom: 0;
    }

    .modal.fade.in{
        top: 50%;
        margin-top: -260px;
    }

    .popup-option {
        display: block;
    }
    .in-opt{
        float: left;
        margin-right: 30px;;
    }
    .in-opt span{
        display: block;
        margin-bottom: 5px;;
    }
    .img-select a:first-of-type{
        min-width: 100px;
    }

</style>
<div class="modal-body">
    <!--<pre>{{ngModel|json}}</pre>-->
    <div class="popup-option" style="overflow: hidden; margin-top: 0">
        <div class="in-opt" data-ng-show="bgcolor">
            <span>Color</span>
            <j-opt-color data-ng-model="ngModel.bgcolor"></j-opt-color>
        </div>
        <div class="in-opt" style="margin-bottom: 10px;">
            <span>Image / Pattern</span>
            <j-opt-image data-ng-model="ngModel.bgimage"></j-opt-image>
        </div>
        <div class="in-opt">
            <span style="display: block">Fixed</span>
            <switch data-ng-model="ngModel.bgimage_attach">
                <switch-option key="fixed">ON</switch-option>
                <switch-option key="scroll">OFF</switch-option>
            </switch>
        </div>
    </div>

    <div class="popup-option" style="clear: both">
        <span style="display: block">Repeat</span>
        <switch data-ng-model="ngModel.bgimage_repeat">
            <switch-option key="repeat">Repeat</switch-option>
            <switch-option key="no-repeat">No Repeat</switch-option>
            <switch-option key="repeat-x">Repeat X</switch-option>
            <switch-option key="repeat-y">Repeat Y</switch-option>
        </switch>
    </div>
    <div class="popup-option">
        <span>Position</span>
        <switch data-ng-model="ngModel.bgimage_position">
            <switch-option key="center">Center</switch-option>
            <switch-option key="left">Left</switch-option>
            <switch-option key="top">Top</switch-option>
            <switch-option key="right">Right</switch-option>
            <switch-option key="bottom">Bottom</switch-option>
        </switch>
    </div>
    <!--<div class="popup-option">-->
        <!--<span>Gradient</span>-->
        <!--<a style="float: right" href="http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/" target="_blank">Generate gradient</a>-->
        <!--<textarea style="display: block; width: 505px" data-ng-model="ngModel.gradient" cols="30" rows="10"></textarea>-->
    <!--</div>-->
</div>
<div class="modal-footer">
    <a class="btn btn-primary green" ng-click="save()">OK</a>
    <br /><br />
</div>